<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="商品详情" left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="list">
        <ul>
          <li>
            <div class="box_content">
              <div class="row1">
                <div class="name">
                  <div class="pic">
                    <img :src="initData.product_image_url" alt>
                  </div>
                  <div class="nameText">
                    <span>{{initData.product_name}}</span>
                    <div class="classification">
                      <div v-for="(item,index) in initData.keyvalueList" :key="index">{{item}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row2">
                <div
                  class="attrItem"
                  v-for="(item,index) in initData.goods_spec_format"
                  :key="index"
                >{{item.spec_name}}：{{item.spec_value_name}}</div>
              </div>
              <div class="row3">
                <div class="left">
                  <span>￥{{initData.price}}/{{initData.product_detail_group_name}}</span>
                </div>
                <div class="right">
                  共
                  <span>{{initData.join_count}}</span>
                  {{initData.product_detail_group_name}}
                </div>
              </div>
            </div>
            <div class="box_footer">
              <div class="box">
                <div class="title">利润收益</div>
                <div class="value">{{initData.profit_scale*100}}%</div>
                <div class="line"></div>
              </div>
              <div class="box">
                <div class="title">分利周期</div>
                <div class="value">{{initData.profit_cycle}}个月</div>
                <div class="line"></div>
              </div>
              <div class="box">
                <div class="title">领回期限</div>
                <div class="value">{{initData.farm_cycle}}天</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="selectNum">
        <div class="left">选择数量</div>
        <div class="right">
          <div @click="reduceNum">
            <img src="../assets/images/reduce.png" alt>
          </div>
          <div>{{productNum}}</div>
          <div @click="addNum">
            <img src="../assets/images/add.png" alt>
          </div>
        </div>
      </div>
      <div class="func_box">
        <div class="box">
          <div class="title">
            <img src="../assets/images/detail3.png" alt>
          </div>
          <div class="value">成本核算</div>
          <div class="line"></div>
        </div>
        <div class="box">
          <div class="title">
            <img src="../assets/images/detail2.png" alt>
          </div>
          <div class="value">业内行情</div>
          <div class="line"></div>
        </div>
        <div class="box">
          <div class="title">
            <img src="../assets/images/detail1.png" alt>
          </div>
          <div class="value">风险控制</div>
        </div>
      </div>
      <div class="sellRecord">
        <div class="title">本场出售记录</div>
        <div class="recordListBox">
          <div class="recordList" v-for="(item,index) in initData.buyingInfo" :key="index">
            <div class="left">
              <img :src="item.avatar" alt>
              <span>{{item.nick_name}}</span>
            </div>
            <div class="right">
              {{item.content}}
              <span>{{item.num}}</span>
              {{initData.product_detail_group_name}}
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <div class="footer">
      <div class="collect" @click="collectMethod">
        <img :src="collectUrl" alt>
        <span :class="{fontColor:isCollect}">收藏</span>
      </div>
      <div class="chat">
        <img src="../assets/images/message.png" alt>
        <span>聊生意</span>
      </div>
      <div class="btn" @click="submitOrder">立即喂养</div>
    </div>
    <div class="pop">
      <van-popup v-model="showPop">
        <div class="wrap">
          <div class="title">选择支付方式</div>
          <div class="payList">
            <div>
              <img src="../assets/images/weixin.png" alt>
              <span>微信支付</span>
            </div>
            <div>
              <img src="../assets/images/zhifubao.png" alt>
              <span>支付宝支付</span>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "farmDetail",
  data() {
    return {
      //下拉刷新
      isLoading: false,
      productNum: 1,
      showPop: false,
      initData: {},
      orderId: "",
      user_id: "10426",
      collectIcon: [
        require("../assets/images/collect.png"),
        require("../assets/images/collect2.png")
      ],
      collectUrl: require("../assets/images/collect.png"),
      isCollect: false
    };
  },
  mounted() {
    if (this.$cookies.get("user_id") && this.$cookies.get("user_id") != null) {
      this.user_id = this.$cookies.get("user_id");
    }
    this.getInitData();
  },
  methods: {
    onClickLeft() {
      // this.$router.back();
      window.webkit.messageHandlers.goBackFarmIndex.postMessage(null);
    },
    addNum() {
      this.productNum++;
    },
    reduceNum() {
      if (this.productNum > 1) {
        this.productNum--;
      }
    },
    //初始化页面
    async getInitData() {
      let params = {
        farmId: this.$route.query.farmId
      };
      const res = await this.$axios.post(this.$api.farmDetailsInfo, params);
      if (res.success) {
        this.initData = res.data;
        this.initData.keyvalueList = this.initData.key_value.split(",");
        this.initData.goods_spec_format = JSON.parse(
          this.initData.goods_spec_format
        );
        this.initData.goods_spec_format.forEach((at, eq) => {
          at.spec_value_name = at.value[0].spec_value_name;
        });
        this.isLoading = false;
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    },
    //提交订单
    async submitOrder() {
      let u = navigator.userAgent;
            let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let message={
                orderId:this.orderId,
                formData:this.formData
            }

      if (isAndroid) {
      } else if (isiOS) {
         window.webkit.messageHandlers.goBackLogin.postMessage(null);
      }
      let params = {
        farmId: this.$route.query.farmId,
        quantity: this.productNum,
        spellGroupType: "8"
        // openId: userInfo.openId
      };
      const res = await this.$axios.post(this.$api.farmAdoptOrder, params);
      if (res.success) {
        // this.showPop = true;
        this.orderId = res.data.order_num;
        this.toPay();
      } else {
        this.$toast(res.msg);
      }
    },
    //下拉刷新
    onRefresh() {
      this.getInitData();
    },
    //收藏
    async collectMethod() {
      let params = {
        user_id: this.user_id,
        shop_id: this.$route.query.shopId,
        language: "zh"
      };
      const res = await this.$axios.post(this.$api.shopCollect, params);
      if (res.success) {
        if (res.msg == "收藏成功") {
          this.collectUrl = this.collectIcon[1];
          this.isCollect = true;
        } else if (res.msg == "取消收藏成功") {
          this.collectUrl = this.collectIcon[0];
          this.isCollect = false;
        }
        this.$toast(res.msg);
      } else {
        this.$toast(res.msg);
      }
    },
    //微信支付
    // async payMethod() {
    //   let params = {};
    //   const res = await this.$axios.post(this.$api.payApi, params);
    //   if (res.success) {

    //   } else {

    //     this.$toast(res.msg);
    //   }
    // },

    //跳转APP支付
    toPay() {  
      var token = this.$cookies.get('token')||localStorage.getItem('token');
      var returnUrl = window.location.href;
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let params={
          orderId:this.orderId,
          shop_id: this.$route.query.shopId,
          farmId: this.$route.query.farmId,
          user_id: this.user_id,
      };
      if (!token) {
            let params={
            returnUrl:this.returnUrl
          };
          if (isAndroid) {
            console.warn('ecologylogin');
          } else if (isiOS) {
            window.webkit.messageHandlers.goBackLogin.postMessage(params);
          }
      };
      if (isAndroid) {
        // window.WebViewJavascriptBridge.callHandler("AndroisVipFun",params,function() {});
      } else if (isiOS) {
        // this.$JsBridge.call('toPayMethod',params,function(response){
        //     alert(response);
        // });
         window.webkit.messageHandlers.toPayMethod.postMessage(params);
      }
      
    }
  }
};
</script>

<style scoped>
.van-popup {
  width: 70%;
  border-radius: 0.08rem;
  -webkit-border-radius: 0.08rem;
}
.pop {
  width: 100%;
}
.pop .wrap {
  width: 100%;
}
.pop .wrap .title {
  width: 100%;
  height: 0.56rem;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.18rem;
  color: #000000;
  border-bottom: 1px solid #ebebeb;
}
.pop .wrap .payList {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1.04rem;
  flex-direction: column;
}
.pop .wrap .payList > div {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  width: 40%;
  padding: 0.09rem 0;
}
.pop .wrap .payList > div img {
  width: 0.2rem;
}
.pop .wrap .payList > div span {
  font-size: 0.15rem;
  color: #333333;
  padding-left: 0.1rem;
}
.recordListBox {
  width: 100%;
  height: 2.9rem;
  overflow-y: auto;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}
.container {
  padding: 0.46rem 0.15rem 0.8rem;
  width: 100%;
}
.list li {
  background: #fff;
  padding: 0 0.15rem;
  margin-top: 0.08rem;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
}
.list .box_content {
  padding: 0.16rem 0 0.16rem;
  border-bottom: 1px solid #f2f2f2;
}
.list .box_content .row1 {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.5rem;
}
.list .box_content .row1 .name {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
}
.list .box_content .row1 .name img {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
.list .box_content .row1 .name .nameText {
  padding-left: 0.17rem;
}
.list .box_content .row1 .name span {
  font-size: 0.15rem;
  color: #333333;
}
.list .box_content .row1 .name .classification {
  display: flex;
  -webkit-display: flex;
  margin-top: 0.05rem;
  flex-wrap: wrap;
}
.list .box_content .row1 .name .classification > div {
  /* width: 0.45rem; */
  height: 0.2rem;
  padding:0 .08rem;
  background: #e4ffeb;
  color: #04b746;
  border-radius: 3px;
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.1rem;
  line-height: 0;
}

.list .box_content .row1 .state {
  height: 100%;
}
.list .box_content .row2 {
  font-size: 0.12rem;
  color: #808080;
  margin-top: 0.15rem;
  display: flex;
  -webkit-display: flex;
  justify-content: flex-start;
  align-items: center;
}
.list .box_content .row2 > div {
  padding: 0 0.1rem;
  border-left: 1px solid #f2f2f2;
}
.list .box_content .row2 > div:first-of-type {
  padding-left: 0;
  border: none;
}
.list .box_content .row3 {
  font-size: 0.12rem;
  color: #333333;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.14rem;
}
.list .box_content .row3 span {
  color: #f44736;
  font-size: 0.16rem;
}
.list .box_footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 0.68rem;
}
.list .box_footer .box {
  width: 33.33%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.list .box_footer .box .line {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 0.01rem;
  height: 0.24rem;
  background: #f2f2f2;
}
.list .box_footer .box .title {
  font-size: 0.12rem;
  color: #333333;
}
.list .box_footer .box .value {
  color: #f44736;
  font-size: 0.12rem;
  margin-top: 0.1rem;
}
.selectNum {
  width: 100%;
  height: 0.57rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  margin-top: 0.05rem;
  padding: 0 0.15rem;
}
.selectNum .left {
  font-size: 0.14rem;
  color: #333333;
}
.selectNum .right {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}
.selectNum .right img {
  width: 0.15rem;
}
.selectNum .right > div {
  margin-left: 0.15rem;
}
.func_box {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 0.73rem;
  background: #fff;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  margin-top: 0.05rem;
}
.func_box .box {
  width: 33.33%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.func_box .box .line {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 0.01rem;
  height: 0.24rem;
  background: #f2f2f2;
}
.func_box .box .title img {
  width: 0.18rem;
}
.func_box .box .value {
  color: #333333;
  font-size: 0.12rem;
  margin-top: 0.08rem;
}
.sellRecord {
  width: 100%;
  background: #fff;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  margin-top: 0.05rem;
  padding: 0 0.15rem;
  /* ouo */
}
.sellRecord .title {
  width: 100%;
  height: 0.4rem;
  display: flex;
  display: -webkit-flex;
  align-items: center;

  font-size: 0.14rem;
  color: #333333;
}
.sellRecord .recordList {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 0.58rem;
  border-top: 1px solid #f2f2f2;
}
.sellRecord .recordList .left {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.sellRecord .recordList .left img {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
.sellRecord .recordList .left span {
  padding-left: 0.15rem;
}
.sellRecord .recordList .right {
  font-size: 0.14rem;
  color: #333333;
}
.sellRecord .recordList .right span {
  color: #f44736;
}
.footer {
  width: 100%;
  height: 0.6rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: flex-start;
}
.footer .collect,
.footer .chat {
  width: 25%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer .collect img,
.footer .chat img {
  width: 0.18rem;
}
.footer .collect span,
.footer .chat span {
  font-size: 0.12rem;
  color: #000000;
  margin-top: 0.05rem;
}
.footer .btn {
  width: 50%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  background: #01bf47;
  color: #fff;
  font-size: 0.16rem;
}
.fontColor {
  color: #00be47 !important;
}
</style>
